<template>
  <div class="p16">
    <h3 class="title">基本信息</h3>
    <table class="table_ mb24">
        <tr>
            <td class="fb key_name">人员名称</td>
            <td class="c-6 key_value"> <el-input size="medium" v-model.trim="item.name" clearable> </el-input> </td>
            <td class="fb">职工号</td>
            <td class="c-6"><el-input size="medium" v-model="item.code" disabled> </el-input></td>
            <td rowspan="6" class="tx-c" style="width:200px">
                <div class="flex">
                    <div class="logo_img logo_img__box"> 
                        <img class="imge" :src="item.image" alt="">
                        <div v-if="!item.image" class="image-slot flex-center">
                            <img src="@/assets/img/headerPhoto.png" alt="">
                        </div>
                    </div>
                </div>
                <p class="c-6 img_size tx-l mt8">建议尺寸160 x 240 px</p>
                <input type="file" ref="file" accept="image/*"  @change="uploadImg" style="display:none">
            </td>
        </tr>
        <tr>
            <td class="fb key_name">所属科室</td>
            <td class="c-6 key_value">
                <inputSearch type="departments" ref="departments" @onChange="searchChang($event,'belong_department_id')"/>
            </td>
            <td class="fb">系统角色</td>
            <td ><el-input size="medium" v-model="item.roles_name" disabled /></td>
        </tr>
        <tr>
            <td class="fb">性别</td>
            <td class="c-6">
                <el-radio-group v-model="item.gander">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                </el-radio-group>
            </td>
            <td class="fb">专业职称</td>
            <td class="c-6">
                <el-input size="medium" v-model="item.professional_rank_title" placeholder="请输入专业职称" clearable> </el-input>
            </td>
        </tr>
        <tr>
            <td class="fb">职称级别</td>
            <td class="c-6">
                <el-select size="medium" v-model="item.professional_rank_level"  placeholder="请选择职称级别" >
                    <el-option
                    v-for="(item,index) in professionalRankLevel"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </td>
            <td class="fb">最高学位</td>
            <td class="c-6">
                <el-select size="medium" v-model="item.first_education"  placeholder="请选择最高学位" >
                    <el-option
                    v-for="(item,index) in firstEducation"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </td>
            
        </tr>
        <tr>
            <td class="fb">手机</td>
            <td class="c-6">
                <el-input size="medium" v-model.number="item.phone" placeholder="请输入手机号" clearable> </el-input>
            </td>
            <td class="fb">身份证号</td>
            <td class="c-6">
                <el-input size="medium" v-model="item.card_no" placeholder="请输入身份证号码" clearable> </el-input>
            </td>
        </tr>
        <tr>
            <td class="fb">出生日期</td>
            <td class="c-6">
                <el-date-picker
                    size="medium"
                    v-model="item.birth"
                    type="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    placeholder="请选择出生日期">
                </el-date-picker>
            </td>
            <td></td>
            <td></td>
        </tr>
    </table>
  </div>
</template>

<script>
import {firstEducation,professionalRankLevel} from '@/assets/js'
export default {
    props:{
        info:{
            default: ()=>({department: {},employee: {}}),
            type:Object,
        }
    },
    data(){
        return{
            firstEducation,
            professionalRankLevel,
            item:{},
            one_xueke:[],
            two_xueke:[],
            imgFiles:null,
        }
    },
    mounted(){
        const info = this.info
        this.item = {
            name: info.employee.name,
            code: info.employee.code,
            image: info.image,
            birth: info.birth,
            gander: info.gander,
            professional_rank_title: info.professional_rank_title,
            professional_rank_level: info.professional_rank_level,
            first_education: info.first_education,
            card_no: info.card_no,
            phone: info.phone,
            belong_department_id: info.belong_department_id,
            roles_id: info.roles_id,
            roles_name: info.role ? info.role.name : ''
        }
        this.$refs.departments.departments_id = info.belong_department_id
        document.querySelector('.logo_img').addEventListener("click",this.clickUpload)

    },
    methods:{
        clickUpload(){
            this.$refs.file.click()
        },
        uploadImg(event){
            const files = event.target.files[0]
            this.imgFiles = files
            this.item.image = URL.createObjectURL(files)
        },
        echo(i,arr){
            let label
            for (const item of arr) {
                if(item.value === i){
                label = item.label
                break;
                }
            }
            return label
        },
        searchChang(id,val){
            this.item[val] = id
        }
    }
}
</script>

<style lang='less' scoped>
/deep/.el-input ,.el-input__inner{
    width: 250px;
}
.imge{
    width: 100%;
    height: 100%;
}
.logo_img__box{
    position: relative;
    .image-slot{
        position: absolute;
        top: 0;
        left: 0;
    }
}
.img_size{
    font-size: 12px;
}
</style>